<!--选择页（作业内容）-->
<template>
	<view class="select-main">
		<!-- <nav-bar class="header" back :title="title" @goBack="goBack" /> -->
		<view class="main-container">
			<view class="main-container-title">
				作业内容类型
			</view>
			<van-radio-group v-model="subParam.radio" direction="horizontal">
				<van-radio :name="item.name" v-for="(item,index) in radioList" :key="index">
					<template #icon="props">
						<view :class="props.checked ?'radio-button-true' :'radio-button-false'">{{item.text}}</view>
					</template>
				</van-radio>

			</van-radio-group>
			<view class="time">
				<view class="main-container-title">
					计划开始时间
				</view>
				<view class="main-container-time" @click="timeClick('startTime')">
					{{subParam.planStartTime ? subParam.planStartTime : "请选择时间"}}
				</view>
				<view class="main-container-title">
					计划结束时间
				</view>
				<view class="main-container-time" @click="timeClick('endTime')">
					{{ subParam.planEndTime ?subParam.planEndTime   : "请选择时间"}}
				</view>
			</view>


		</view>
		<view class="bottom-container">
			<van-button class="clr-btn" @click="clear()">重置</van-button>
			<van-button color="#417ADC" @click="determine()">确定</van-button>
		</view>


	</view>
</template>

<script>
	import navBar from '../../../components/common/nav-bar'

	export default {
		name: 'selectContent',
		components: {
			navBar,
		},
		computed: {

		},
		props: {
			subParam: {
				type: Object,
				default: function() {
					return {
						planStartTime: "",
						planEndTime: "",
						radio: ""
					}
				}
			},
		},

		data() {
			return {
				showCalendar: false,
				radioList: [{
					name: "",
					text: "全部"
				}, {
					name: "1",
					text: "通信光缆"
				}, {
					name: "2",
					text: "通信设备"
				}, {
					name: "3",
					text: "通信电源"
				}],
			}
		},
		onLoad(option) {},
		mounted() {},
		computed: {
			time() {
				let timeMsg = ""
				if (this.subParam.planEndTime) {
					timeMsg = this.subParam.planStartTime + '-' + this.subParam.planEndTime
				} else {
					timeMsg = this.subParam.planStartTime
				}
				return timeMsg
			}
		},
		methods: {
			goBack() {
				this.$emit('cancel')
			},
			determine() {
				this.$emit('determine')
			},
			clear() {
				this.$emit('selectContentClear')
			},
			timeClick(type) {
				this.$emit('selectTimeClick',type)
			},


		}
	}
</script>

<style scoped lang="scss">
	.select-main {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100vh;
		background-color: #FFFFFF;
		font-family: vant-icon;

		.main-container-title {
			font-size: px2vw(40);
			line-height: px2vw(62);
			color: #666666;
			padding: px2vw(92) 0 px2vw(36) 0;
		}

		.main-container-time {
			display: flex;
			align-items: center;
			width: 90%;
			height: px2vh(90);
			font-size: px2vw(36);
			line-height: px2vw(90);
			color: #666666;
			background-color: #F7F7F7;
			padding: 0 0 0 px2vh(40);
		}

		.main-container {
			flex: 1;
			min-height: calc(100vh - #{px2vh(363)});
			padding: px2vh(30) px2vw(40) px2vh(30) px2vh(60);
		}

		.bottom-container {
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			z-index: 99;
			position: sticky;
			bottom: 0;
			width: 100%;
			height: px2vh(100);
			padding: px2vh(20) px2vw(40);
			background-color: #fff;


			.clr-btn {
				flex: 1;
				height: px2vh(100);
				font-size: px2vh(42);
				border-radius: px2vh(10);
				color: #417ADC;
				text-align: center;
				line-height: px2vh(100);
				background-color: #ECF1FB;
			}

			.van-button {
				flex: 1;
				margin-left: px2vw(20);
				height: px2vh(100);
				font-size: px2vw(42);
				border-radius: px2vh(10);
			}
		}

		.van-radio-group {

			.radio-button-false,
			.radio-button-true {
				width: px2vw(200);
				height: px2vh(90);
				margin-bottom: px2vh(36);
				font-size: px2vw(36);
				line-height: px2vh(90);
				text-align: center;

			}

			.radio-button-true {
				color: #417ADC;
				background-color: #ECF1FB;
			}

			.radio-button-false {
				color: #666666;
				background-color: #F7F7F7;
			}
		}

		/deep/ .van-radio__icon {
			height: 100%;
		}

		// ::v-deep .van-calendar{
		// 	height: 80%;
		// }
	}
</style>
